<!DOCTYPE html>
<html lang="zhCN">

<head>
    <meta charset="utf-8" />
    <title>风场、气象、空气质量的实时全国地图</title>
    <meta name="keywords" content="风场, 空气质量, 雾霾, 气象, 地图, 官网" />
    <meta name="description" content="通过超级计算机的预报，在这个地图上查看实时的风场，天气和空气质量状况。" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="风场、气象、空气质量的实时全国地图" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="./styles/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="./styles/styles.css" />
    <link rel="stylesheet" type="text/css" href="./styles/phone_styles.css" />
    <link rel="stylesheet" href="./styles/common.css" /> 
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
    <link rel="stylesheet" href="./styles/leaflet.css">
    <link rel="stylesheet" href="./styles/map.css">
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <script src="./js/leaflet-velocity.js"></script>
    <script src="./js/leaflet.canvas-markers.js"></script>
</head>

<body>
    <!--适用于PC端的时间轴-->
    <div class="player" id="player">
        <p><img src="./img/start.png" alt="" /></p>
    </div>
    <div id="footerContainer">
        <div class="footerBox">
            <!--两个线条-->
            <div class="bottomLine">
                <div class="scale" id="time-line">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="topLine"></div>
                <div class="current"></div>
            </div>
            <!--提示框-->
            <div class="tip"></div>
            <div class="tipone"></div>
            <!--未来五天日期内容-->
            <div class="dateBox">
                <span id="tip_scale"></span>
                <span id="current_scale"></span>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <!-- <p></p> -->
            </div>
        </div>
        <!-- PC端快捷键提示 -->
        <div id="Shortcut_key">
            <div class="detail">
                <div>快捷键提示</div>
                <div>
                    <p style="width:100%;"><span style="float:right;cursor:pointer;">×</span></p>
                    <p>K：快进8小时</p>
                    <p>k：快进1小时</p>
                    <p>J：快退8小时</p>
                    <p>j：快退1小时</p>
                    <p>n：回到当前</p>
                    <p>b：播放</p>
                </div>
            </div>
        </div>
    </div>
   

    <canvas id="scale" width="0" height="0"></canvas>
    <div id="color-bar"></div>
    <div class="last-hour">上一小时</div>
    <div class="next-hour">下一小时</div>
    <div id="location-value-units" class="location text-button colorBarvalue"></div>
    <div id="location-wind-units" class="location text-button colorBarwind"></div>


    <!--右边点击功能模块-->
    <div class="right_click">
        <div class="mask"></div>
        <div class="enjoy"></div>
        <div id="menuList">
            <div class="bitmap" onclick="tabMap()">
                <span>点位图</span>
            </div>
            <div class="drop-up-button " id="hideMenuList">
                <img class="up-img" src="./img/menu_up_arrow.png">
            </div>
        </div>
    </div>
    
    <!--左下角栏-->
    <div class="typeselect">
        <div class="menu-list-box">
            <!-- 温度的变化		 -->
            <div class="menu-box fl menuSelect1" id="otherMap"
                style="clear: both; border-top-left-radius: 12px; border-top-right-radius: 12px;">
  


                    <!-- 风的变化			 -->
                <div class="fore wind-speed weather">
                    <p class="fengsu aaa">
                        <a class="tu image-size" href="javascript:;"></a>
                        <span class="text-button zi" id="wind" title="风速">风力</span>
                    </p>
                </div>

            </div>
            <div class="menu-box air-quality fl menuSelect2"
                style="clear: both;border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;">
                <!-- <h1 class="menu-title">空气质量</h1> -->
                <!--AQI的变化-->
                <div data="aqi" class="wuran">
                    <p class="AQI aaa">
                        <a class="tu image-size" href="javascript:;"></a>
                        <span class="text-button zi" id="aqi" title="空气质量指数">AQI</span>
                    </p>
                </div>
                <!--PM2.5的变化-->
                <div data="pm25" class="wuran">
                    <p class="pm25 aaa">
                        <a class="tu image-size" href="javascript:;"></a>
                        <span class="text-button zi" id="pm2_5" title="细颗粒物">PM2.5</span>
                    </p>
                </div>
                <!--PM10的变化-->
                <div data="pm10" class="wuran">
                    <p class="pm10 aaa">
                        <a class="tu image-size" href="javascript:;"></a>
                        <span class="text-button zi" id="pm10" title="粗颗粒物">PM10</span>
                    </p>
                </div>
                <!--CO的变化-->
                <div data="co" class="wuran">
                    <p class="co aaa">
                        <a class="tu image-size" href="javascript:;"></a>
                        <span class="text-button zi" id="co" title="一氧化碳一小时">CO</span>
                    </p>
                </div>
                <!--O3的变化-->
                <div data="o3" class="wuran">
                    <p class="o3 aaa">
                        <a class="tu image-size" href="javascript:;"></a>
                        <span class="text-button zi" id="o3" title="臭氧一小时">O3</span>
                    </p>
                </div>
                <!--NO2的变化-->
                <div data="no2" class="wuran">
                    <p class="no2 aaa">
                        <a class="tu image-size" href="javascript:;"></a>
                        <span class="text-button zi" id="no2" title="二氧化氮一小时">NO2</span>
                    </p>
                </div>
                <!--SO2的变化-->
                <div data="so2" class="wuran">
                    <p class="so2 aaa">
                        <a class="tu image-size" href="javascript:;"></a>
                        <span class="text-button zi" id="so2" title="二氧化硫一小时">SO2</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="display-menu-box">
            <div class="second-menu fl">
                <p class="wind-mode1">
                    <span class="pollution text-button wind-mode1-active" id="real">实时</span>
                    <span class="pollution text-button" id="acc">累计</span>
                </p>
                <p class="heigh-box">
                    <e>高度:</e>
                    <e>地上10米</e>
                </p>
            </div>
        </div>
        <div class="switch-box" style="padding-left: 15px;">
            <div class="phone-button">
                <div class="switch">
                    <label class="fl"><input class="mui-switch" id="animate-start" type="checkbox"></label>
                    <span class="fl switch-lable changeBlack changeWind">动态风</span>
                    <div class="clear-float"></div>
                </div>
            </div>
        </div>


        <p class="wind-mode">
            <span class="surface text-button" id="surface-level" title="近地面">地上两米</span>
            <span class="surface text-button" id="isobaric-80m">80m</span>
            <span class="surface text-button" id="isobaric-100m">100m</span>
            <span class="surface text-button" id="isobaric-250m">250m</span>
            <span class="surface text-button" id="isobaric-500m">500m</span>
            <span class="surface text-button" id="isobaric-750m">750m</span>
            <span class="surface text-button" id="isobaric-1000m">1000m</span>
            <span class="surface text-button" id="isobaric-1500m">1500m</span>
        </p>
    </div>
        
    
    
    <!-- 地图放大缩小 -->
    <div class="zoom-button-box">
        <div class="zoomin">+</div>
        <div class="zoomout">-</div>
    </div>
    <div class="phoneTabMap" onclick="tabMap()">
               点位
    </div>

    <div class="new-feature-prompt">
        <div class="avtiveClose" onclick="gotoActive()"></div>
        <div class="avtiveClose1" onclick="closeNewFeaturePrompt()"></div>
    </div>
    


    <div class="success-alert">
        成功
    </div>




    <div class="add-warning-model" id="addWarningModel">
        <div class="header">
            <h1>新增报警/预警</h1>
            <a class="close-icon add-warning-active" onclick="closeWorningBox(true)">x</a>
            <a class="close-icon edit-warning-active" onclick="closeWorningBox(false)">x</a>
        </div>
        <form id="warningForm"></form>
    </div>

    <script type="text/html" id="warningFormModel">
        <div class="title">
            <h2>条件选择</h2>
        </div>
        <div class="condition-box" id="conditionBox">
            <div class="select-box">
                <div class="select-mask" id="searchCityMask"></div>
                <div class="input-box" onclick="showSelect(this)">
                    <input class="fl" onblur="leaveCityBox(this)" name="city" id="searchCity" placeholder="请输入城市">
                    <img class="fr search-icon" src="/img/search_city.png">
                </div>
                <div class="select-content-box">
                    <ul id="warningCityList"></ul>
                </div>
            </div>
            <div class="select-box pointer">
                <div class="select-mask" id="selectStationMask"></div>
                <div class="input-box" onclick="showSelect(this)">
                    <div class="select-mask-internal" style="background:none;display:block"></div>
                    <input class="fl pointer" id="selectSatation" name="station" placeholder="选择站点">
                    <img class="fr select-icon" src="/img/drop_down.png">
                </div>
                <div class="select-content-box">
                    <ul id=warningStationList></ul>
                </div>
            </div>
            <div class="select-box pointer">
                <div class="select-mask" id="selectFactorMask"></div>
                <div class="input-box" onclick="showSelect(this)">
                    <div class="select-mask-internal" style="background:none;display:block"></div>
                    <input class="fl pointer" id="selectSatationFactor" name="factor" placeholder="选择因子">
                    <img class="fr select-icon" src="/img/drop_down.png">
                </div>
                <div class="select-content-box">
                    <ul id="warningFactorList"></ul>
                </div>
            </div>
        </div>
        <div id="mnitoringAlarmBox">
            <div class="title">
                <h2 class="fl">监测报警设置</h2>
                <p class="fl">勾选生效</p>
            </div>
            <div class="warning-box">
                <div class="warning-input-box">
                    <div class="warning-input">
                        <input class="fl check-box" name="highValueSta" value="true" type="checkbox">
                        <span class="fl check-box-type">高值报警</span>
                        <p class="fl input-name">实时<span class="warning-depiction">浓度</span></p>
                        <img class="fl icon" src="/img/more_than_icon.png">
                        <input class="fl input" name="highValue">
                        <span class="fl unit warning-unit">μg/m³</span>
                        <div class="clear-both"></div>
                    </div>
                    <p class="remarks">当实时监测数据高于设置的阈值时，产生报警提醒。</p>
                </div>
                <div class="warning-input-box" id="allCity" style="display:none">
                    <div class="warning-input">
                        <input class="fl check-box" name="highThanSta" value="true" type="checkbox">
                        <span class="fl check-box-type">高值报警</span>
                        <p class="fl input-name">高于市均值</p>
                        <img class="fl icon" src="/img/more_than_icon.png">
                        <input class="fl input" name="highThanValue">
                        <span class="fl unit">%</span>
                        <div class="clear-both"></div>
                    </div>
                    <p class="remarks">当站点实时浓度高于市均值，且高于设置的阈值时，产生报警提醒。</p>
                </div>
                <div class="warning-input-box">
                    <div class="warning-input">
                        <input class="fl check-box" name="changeValueStat" value="true" type="checkbox">
                        <span class="fl check-box-type">突变报警</span>
                        <span class="fl input-name">变化率</span>
                        <img class="fl icon" src="/img/more_than_icon.png">
                        <input class="fl input" name="changeValue">
                        <span class="fl unit">%</span>
                        <div class="clear-both"></div>
                    </div>
                    <p class="remarks">实时浓度对比上一小时，变化率高于设置的阈值时，产生报警提醒。</p>
                </div>
            </div>
        </div>
        <div class="title" style="margin-top:20px;">
            <h2 class="fl">预警设置</h2>
            <p class="fl">勾选生效</p>
        </div>
        <div class="warning-box">
            <div class="warning-input-box">
                <div class="warning-input">
                    <input class="fl check-box" name="warningValueSta" value="true" type="checkbox">
                    <span class="fl check-box-type">预警条件</span>
                    <div class="clear-both"></div>
                </div>
                <div class="warning-input" style="padding-left:25px;">
                    <p class="fl">未来三天，当前因子<span class="warning-depiction">浓度</span>累计出现</p>
                    <input class="fl input" name="warningValueCount" style="margin: 0 3px;width: 50px;">
                    <span class="fl unit">小时</span>
                    <span class="fl">及以上,</span>
                    <span class="fl unit">高于</span>
                    <input class="fl input" name="warningValue" style="margin:0 3px;">
                    <span class="fl unit warning-unit">μg/m³</span>
                    <span class="fl wind-direct">的</span>
                    <select class="fl wind-select wind-direct" name="windDirect">
                        <option value="N" lable="北风" selected>北风</option>
                        <option value="NE" lable="东北风">东北风</option>
                        <option value="E" lable="东风">东风</option>
                        <option value="SE" lable="东南风">东南风</option>
                        <option value="S" lable="南风">南风</option>
                        <option value="SW" lable="西南风">西南风</option>
                        <option value="W" lable="西风">西风</option>
                        <option value="NW" lable="西北风">西北风</option>
                    </select>
                    <span class="fl wind-direct">时,</span>
                    <span class="fl not-wind-direct">的情况时,</span>
                    <span class="fl">预警提醒</span>
                    <div class="clear-both"></div>
                </div>
            </div>
        </div>
        <div align="center">
            <button class="submit-button add-warning-active" onclick="warningSave(true)" type="button">保存</button>
            <button class="submit-button edit-warning-active" onclick="warningSave(false)" type="button">保存</button>
        </div>
    </script>

    <script type="text/html" id="warningFormSelectModel">
        <li title="NAME" onclick="chooseSelect(this,'NAME','ID','TYPE','LEVEL')">NAME</li>
    </script>

    <script type="text/html" id="warningFormStationSelectModel">
        <li title="NAME" onclick="chooseSelect(this,'NAME','ID','TYPE','LEVEL')">
            <span style="color:STATION_TYPE_COLOR">STATION_TYPE</span> NAME</li>
    </script>

    <script type="text/html" id="selectTimeContent">
        <li class="select-time-content" style="height:HEIGHT">CONTENT</li>
    </script>

    <script type="text/html" id="warningFactorTableModel">
        <tr>
            <td>FACTOE_NAME</td>
            <td>HIGH_VALUE</td>
            <td>CITY_AVERAGE_VALUE</td>
            <td>CHANGE_VALUE</td>
            <td style="font-size:12px;">WARNING_CONDITION</td>
            <td>
                <span class="edit fl"
                    onclick="editFactor('CITY_ID', 'STATION_ID','FACTOR_KEY','STATION_LEVEL')">修改</span>
                <span class="delete fr" onclick="deleteFactor('FACTOR_ID')">删除</span>
            </td>
        </tr>
    </script>

    <script type="text/html" id="worningSationModel">
        <li class="station IS_ACTIVE"
            onclick="chooseWarningStation(this,'STATION_NAME','STATION_ID','CITY_ID','STATION_LEVEL')">
            <div class="close-icon" onclick="deleteWarningStation('STATION_ID')">x</div>
            <span>STATION_NAME</span>
        </li>
    </script>

    <script type="text/html" id="worningCityModel">
        <li class="city IS_ACTIVE" onclick="chooseWarningCity(this,'CITY_NAME','CITY_ID')">
            <div class="close-icon" onclick="deleteWarningCity('CITY_ID')">x</div>
            <span>CITY_NAME</span>
        </li>
    </script>

    <script type="text/html" id="addStationButtonModle">
        <li class="add-button fl" onclick="showAddWorningBox(this,true)">+</li>
        <li class="clear-both"></li>
    </script>

    <script type="text/html" id="addCityButtonModle">
        <li class="add-button fl" style="display:none" onclick="showAddWorningBox(this)">+</li>
        <li class="clear-both"></li>
    </script>



    <div id="pointDetailModel" class="point_detail_model" style="width: 604px!important;">
        <span class="closeSideButton">×</span>
        <div style="height: 100%;overflow: auto;width: 604px!important;">
            <h1 class="main_title" id="city">廊坊市</h1>
            <div class="current_data_box">
                <ul class="data_box">
                    <li class="fl">
                        <p class="fl">AQI指数：</p>
                        <p class="fl" style="background: #fd7e24;border-radius: 50px;padding: 0 10px">轻度120</p>
                    </li>
                    <li class="fl">
                        <p class="fl">首要污染物：PM2.5</p>
                    </li>
                    <li class="fl">
                        <a class="fl">点击查看更多历史数据》</a>
                    </li>
                    <li class="fl">
                        <p class="fl">湿度：20%</p>
                    </li>
                    <li class="fl">
                        <p class="fl">气压：200hpa</p>
                    </li>
                    <li class="fl">
                        <p class="fl">纬度：39.31</p>
                    </li>
                    <li class="fl">
                        <p class="fl">气温：20℃</p>
                    </li>
                    <li class="fl">
                        <p class="fl">东北风 2级</p>
                    </li>
                    <li class="fl">
                        <p class="fl">纬度：116.40</p>
                    </li>
                </ul>
                <p class="explain">最近的空气质量距离当前位置2公里，数据更新时间：2018-12-30 12:00</p>
                <p class="explain">最近的气象站点距离当前位置15公里，数据更新时间：2018-12-30 12:00</p>
            </div>
            <h2 class="title">未来24小时污染预报</h2>
            <div class="hourly_forecast_box" style="" id="hourlyForecastBox"></div>
            <h2 class="title" style="margin-top: 10px">未来五天预报</h2>
            <div class="hourly_forecast_box" style="height: 120px;" id="dailyForecastBox"></div>
            <div class="hourly_forecast_box" id="daily_hourlyForecastBox"></div>
        </div>
    </div>
    <script type="text/html" id="hourlyForecastModel">
        <div class="fl name_box">
            <ul>
                <li>时间</li>
                <li id="airPollutionButton">空气质量</li>
                <li>风向</li>
                <li id="windSpeedButton">风力m/s</li>
                <li id="tempBoxButton">温度℃</li>
                <li id="humBoxButton">湿度%</li>
                <li id="coBoxButton">COμg/m³</li>
                <li id="so2BoxButton">SO2μg/m³</li>
                <li id="no2BoxButton">NO2μg/m³</li>
                <li id="pm25BoxButton">PM2.5μg/m³</li>
                <li id="pm10BoxButton">PM10μg/m³</li>
                <li id="o3BoxButton">O3μg/m³</li>
                <li id="pressureBoxButton">压强hpa</li>
                <li id="rainfallBoxButton">降雨量mm</li>
                <li id="swdBoxButton">辐射W/㎡</li>
            </ul>
        </div>
        <div class="fl content_box">
            <div style="width: 1920px;height: 30px">
                <ul id="hour"></ul>
                <ul id="airPollution"></ul>
                <ul id="windDir"></ul>
                <ul id="windSpeed"></ul>
                <ul id="tempBox"></ul>
                <ul id="humBox"></ul>
                <ul id="coBox"></ul>
                <ul id="so2Box"></ul>
                <ul id="no2Box"></ul>
                <ul id="pm25Box"></ul>
                <ul id="pm10Box"></ul>
                <ul id="o3Box"></ul>
                <ul id="pressureBox"></ul>
                <ul id="rainfallBox"></ul>
                <ul id="swdBox"></ul>
            </div>
        </div>
    </script>

    <script type="text/html" id="dailyForecastModel">
        <div class="fl name_box" style="height: 120px;">
            <ul>
                <li>日期</li>
                <li>日AQI</li>
                <li>日均温度℃</li>
                <li>日均湿度%</li>
            </ul>
        </div>
        <div class="fl content_box" style="height: 120px;">
            <div style="position: relative">
                <ul id="days"></ul>
                <ul id="daily_aqi"></ul>
                <ul id="daily_temp"></ul>
                <ul id="daily_hum"></ul>
            </div>
        </div>
    </script>

    <script type="text/html" id="intervalDivModel">
        <div id="intervalDiv" style="height: 150px;width: 100%"></div>
    </script>

    <script type="text/html" id="chartDivModel">
        <div id="chartDiv" style="height: 150px;width: 487px"></div>
    </script>

    <script type="text/html" id="windDirModel">
        <li class="fl">
            <img class="wind_dir"
                style="-moz-transform: rotate(ANGLEdeg);-o-transform: rotate(ANGLEdeg);-webkit-transform: rotate(ANGLEdeg);transform: rotate(ANGLEdeg);"
                src="/images/wind_dir_icon.png">
        </li>
    </script>

    <script type="text/html" id="publicContentModel">
        <li class="fl">
            <p class="pollution_content">CONTENT</p>
        </li>
    </script>

    <script type="text/html" id="dayModel">
        <li class="fl dayBackColor chooseKEY" id="day_KEY" style="width: 20%;cursor: pointer">
            <p class="pollution_content" style="color: #3697d1">CONTENT</p>
        </li>
    </script>

    <script type="text/html" id="dayContentModel">
        <li class="fl dayBackColor chooseKEY" style="width: 20%">
            <p class="pollution_content" style="color:#666666">CONTENT</p>
        </li>
    </script>

    <script type="text/html" id="dayAqiModel">
        <li class="fl dayBackColor chooseKEY" style="width: 20%;position: relative">
            <p class="pollution_content"
                style="height: 20px;line-height:20px;margin:5px auto;width: 70%;border-radius: 20px;color: white;background: BACKGROUND;">
                CONTENT</p>
        </li>
    </script>
    
    <!--整个左边模块-->
    <div id="beforemaxTitle">
        <a href="/"> <span class="name-zh">慧聚气象</span>
            <span class='name-en'>AIRWISE</span></a>
    </div>
    
    
    <div id="pc" class="container">

        <div id="box" class="header">
            <div class="mask"></div>
            <div class="header-content">
                <p>
                    <input type="text" name="arrcity" id="arrcity" placeholder="请输入城市名称" />
                </p>
                <div id="dingwei" style="display: none;">
                    <div class="text-button span2" id="show-location" title="当前位置">
                        <img class="pointing-icon" src="./img/position_icon.png">
                    </div>
                </div>
            </div>

        </div>
        <div id='suggest' class="ac_results"></div>
    </div>

    <div class="centerLogo">
        <img src="./images/logo.png" alt="">
    </div>

    <!--页面上的风速圆环-->
    <div id="display">
        <div class="index_box">
            <canvas id="map" class="max-screen"></canvas>
            <canvas id="animation" class="fill-screen"></canvas>
            <canvas id="fastoverlay"></canvas>
            <canvas id="overlay" class="fill-screen"></canvas>
            <canvas id="overlay2" class="fill-screen"></canvas>
            <canvas id="foreground" class="max-screen"></canvas>
            <svg id="windbarb" class="fill-screen" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
            <svg id="annotation" class="fill-screen" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
            <svg id="tiles" class="fill-screen" xmlns="http://www.w3.org/2000/svg" version="1.1"
                style="position:absolute;top:0;left:0;z-index:-999"></svg>
            <svg id="tiles_anno" class="fill-screen" xmlns="http://www.w3.org/2000/svg" version="1.1"
                style="position:absolute;top:0;left:0;z-index:-998"></svg>
        </div>

        <div class="circle">
            <div id="circle-close">×</div>
            <span style="position: absolute; top: 90px; right: 0;">东</span>
            <span style="position: absolute; bottom: 0; left: 92px;">南</span>
            <span style="position: absolute; top: 90px; left: 0;">西</span>
            <span style="position: absolute; top: 0; left: 92px;">北</span>
            <div id="circle-icon"></div>
            <div id="circle-arrow" style="transform: rotate(0deg)">
                <div id="second-container">
                    <div id="wind-value" class="arrow-text" style="transform: rotate(0deg);">风向东南</div>
                </div>
                <div id="circle-trangle"></div>   
            </div>
        </div>
    </div>
    <div class="addMap"></div>
    <div class="circle-button">
        <div class="point">
        </div>
        <div class="city">
            <p>点击查看城市数据</p>
            <div class="see-triangle"></div>
        </div>
    </div>
    <div class="loadingIcon loading-icon">
        <div class="mask"></div>
        <img src="./img/loading.png">
    </div>
    <div class="basisContentBox forecast-box data-box"></div>
    <div class="weatherContentBox forecast-box data-box"></div>
    <div class="weatherMonitorBox forecast-box data-box"></div>
    <div class="airQualityBox air-quality-box forecast-box data-box"></div>
    <div class="highAltitudeHumBox forecast-box data-box" style="display: none">
        <div class="highAltitudeHumChart"></div>
    </div>
    <div class="highAltitudeTempBox forecast-box data-box" style="display: none">
        <div class="highAltitudeTempChart"></div>
    </div>

    
    </div>

    </ul>
    <div class="loadingIcon loading-icon">
        <div class="mask"></div>
        <img src="./img/loading.png">
    </div>
    <div class="basisContentBox forecast-box data-box"></div>
    <div class="weatherContentBox forecast-box data-box"></div>
    <div class="weatherMonitorBox forecast-box data-box"></div>
    <div class="airQualityBox air-quality-box forecast-box data-box"></div>
    <div class="highAltitudeHumBox forecast-box data-box" style="display: none">
        <div style="height: 330px;width: 100vw;" class="highAltitudeHumChart"></div>
    </div>
    <div class="highAltitudeTempBox forecast-box data-box" style="display: none">
        <div style="height: 330px;width: 100vw" class="highAltitudeTempChart"></div>
    </div>
  
    </div>
    <!--城市底边栏弹框-->
    <div id="cityDetailBox" class="bottom-box">
        <span class="closeSideButton">×</span>
        <div class="near-button" id="showCityStation">城市站点
            <img class="fl" src="./img/left_icon.png">
        </div>
        <div class="city-station-box">
            <div class="close-button">X</div>
            <div id="cityStationBox">
                <p class="city-title"><span id="cityCame">廊坊</span>监测站点</p>
                <div class="city-type-button">
                    <button id="tableButtonInit" style="border-radius: 3px 0 0 3px;"
                        class="fl active-button">国控</button>
                    <button style="border-radius: 0 3px 3px 0;" class="fr">省控</button>
                </div>
                <p id="stationDataTime" class="data-time"></p>
                <div class="table-box">
                    <table id="nationalControl">
                        <thead>
                            <tr>
                                <td class="name" width="100px">站点名称</td>
                                <td class="factor">AQI</td>
                                <td>等级</td>
                                <td class="factor">PM2.5</td>
                                <td class="factor">PM10</td>
                                <td class="factor">SO2</td>
                                <td class="factor">NO2</td>
                                <td class="factor">O3</td>
                                <td class="factor">CO</td>
                            </tr>
                        </thead>
                        <tbody class="table-body"></tbody>
                    </table>

                    <table id="provincialControl" style="display: none">
                        <thead>
                            <tr>
                                <td class="name">站点名称</td>
                                <td class="factor">AQI</td>
                                <td>等级</td>
                                <td class="factor">PM2.5</td>
                                <td class="factor">PM10</td>
                                <td class="factor">SO2</td>
                                <td class="factor">NO2</td>
                                <td class="factor">O3</td>
                                <td class="factor">CO</td>
                            </tr>
                        </thead>
                        <tbody class="table-body"></tbody>
                    </table>
                </div>
            </div>
        </div>
        <ul class="bpttom-title">
            <li class="basics-box active">
                <div class="menu-button">
                    <img src="./img/basis_silent.png" class="silent-img">
                    <img src="./img/basis_active.png" class="active-img">
                    <span>基础</span>
                </div>
            </li>
            <li class="airqua-box">
                <div class="menu-button">
                    <img src="./img/aqi_silent_icon.png" class="silent-img">
                    <img src="./img/aqi_active_icon.png" class="active-img">
                    <span>空气质量</span>
                </div>
            </li>
            <li class="weatherfor-box">
                <div class="menu-button">
                    <img src="./img/weather_active_icon.png" class="active-img">
                    <img src="./img/weather_silent_icon.png" class="silent-img">
                    <span>气象预报</span>
                    <div class="airqua-triangle"></div>
                </div>
                <div class="drop-down">
                    <p>气象预报</p>
                    <p>气象对比</p>
                </div>
            </li>
            <li class="high-altitude-box">
                <div class="menu-button">
                    <span>高空数据</span>
                    <div class="airqua-triangle"></div>
                </div>
                <div class="drop-down">
                    <p>高空温度</p>
                    <p>高空湿度</p>
                </div>
            </li>
        </ul>
        <div class="loadingIcon loading-icon">
            <div class="mask"></div>
            <img src="./img/loading.png">
        </div>
        <div class="basisContentBox forecast-box data-box"></div>
        <div class="weatherContentBox forecast-box data-box"></div>
        <div class="weatherMonitorBox forecast-box data-box"></div>
        <div class="airQualityBox air-quality-box forecast-box data-box"></div>
        <div class="highAltitudeHumBox forecast-box data-box" style="display: none">
            <div class="highAltitudeHumChart"></div>
        </div>
        <div class="highAltitudeTempBox forecast-box data-box" style="display: none">
            <div class="highAltitudeTempChart"></div>
        </div>

    </div>

    <!-- 移动端空地详情 -->
    <div class="phone-bottom-box" id="phoneBottomDetail">
        <div class="detail-header">
            <img class="close-icon" onclick="closePhoneBottomBox()" src="./img/drop_down_icon.png">
        </div>

        <div class="type-button-box">
            <ul>
                <li class=“fl”>
                    <div class="button active">
                        <span>基础</span>
                    </div>
                </li>
                <li class=“fl”>
                    <div class="button">
                        <span>空气质量</span>
                    </div>
                </li>
                <li class=“fl”>
                    <div class="button">
                        <span>气象预报</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="week-box">
            <ul>
                <li>周一</li>
                <li>周二</li>
                <li>周三</li>
                <li>周四</li>
                <li>周五</li>
            </ul>
        </div>
        <div class="loadingIcon loading-icon">
            <div class="mask"></div>
            <img src="./img/loading.png">
        </div>
        <div class="color-bar">
            <div class="slider-div"></div>
        </div>
        <div class="basisContentBox forecast-box data-box" style="display: block"></div>
        <div class="weatherContentBox forecast-box data-box"></div>
        <div class="airQualityBox air-quality-box forecast-box data-box"></div>
    </div>
    


    <script type="text/html" id="phoneHourModel">
        <li class="fl  time-text-model" class="">TIME</li>
    </script>

    <script type="text/html" id="phoneWeekModel">
        <li class="fl  time-text-model" class="">TIME</li>
    </script>

    <script type="text/html" id="phonePollutionBoxModel">
        <div class="content">
            <div class="box">
                <span class="fl name">NAME:</span>
                <p class="fr value" style="background:BACKGROUND">VALUE</p>
            </div>
        </div>
    </script>

    <script type="text/html" id="phoneCityStationInfo">
        <div class="station-info">
            <p class="station-name">STATION_NAME</p>
            <ul class="station-data-box" id="STATION_ID"></ul>
        </div>
    </script>

    <script type="text/html" id="phoneCityStationContentInfo">
        <li>
            <p>NAME</p>
            <p class="value" style="background:BACKGROUND">VALUE</p>
        </li>
    </script>

    <script type="text/html" id="stationtTbody">
        <tr onclick="showStationData('STATION_ID',this)">
            <td class="station-name name" title="STATION_NAME">STATION_NAME</td>
            <td>AQI</td>
            <td>
                <p class="aqi-content" style="background:BACKGROUND">LEVEL</p>
            </td>
            <td>PM25</td>
            <td>PM10</td>
            <td>SO2</td>
            <td>NO2</td>
            <td>O3</td>
            <td>CO</td>
        </tr>
    </script>

    <script type="text/html" id="loadingModel">
        <div class="loading-icon" style="display:block;">
            <div class="mask"></div>
            <img src="./img/loading.png">
        </div>
    </script>

    <script type="text/html" id="nearStationModel">
        <p class="coordinate">经纬度 LONNUM,LATNUM</p>
        <div class="title">
            <p class="station-name" title="AIR_STATION_NAME">AIR_STATION_NAME</p>（距离DISTANCEkm）
        </div>
        <p class="update-time">空气质量站点 | 更新时间：AIR_UPDATE_TIME</p>
        <div style="height:30px;">
            <div class="pollution-box">
                <p class="name">AQI</p>
                <p class="content" style="background:AQIBACK">AQIVALUE</p>
            </div>
        </div>
        <div>
            <div class="pollution-box">
                <p class="name">PM2.5</p>
                <p class="content" style="background:PM25BACK">PM25VALUE</p>
            </div>
            <div class="pollution-box">
                <p class="name">SO2</p>
                <p class="content" style="background:SO2BACK">SO2VALUE</p>
            </div>
            <div class="pollution-box">
                <p class="name">PM10</p>
                <p class="content" style="background:PM10BACK">PM10VALUE</p>
            </div>
            <div class="pollution-box">
                <p class="name">NO2</p>
                <p class="content" style="background:NO2BACK">NO2VALUE</p>
            </div>
            <div class="pollution-box">
                <p class="name">CO</p>
                <p class="content" style="background:COBACK">COVALUE</p>
            </div>
            <div class="pollution-box">
                <p class="name">O3</p>
                <p class="content" style="background:O3BACK">O3VALUE</p>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="title" style="margin-top:5px;">
            <p class="station-name" title="WEATHER_STATION_NAME">WEATHER_STATION_NAME</p>（距离WEARHER_DISTANCEkm）
        </div>
        <p class="update-time">气象站点 | 更新时间：WEATHER_UPDATE_TIME</p>
        <div style="width:215px;margin: 0 auto;">
            <div class="weather-box">
                <p class="name">气温</p>
                <p class="content" style="background:TEMPBACK">TEMPVALUE℃</p>
            </div>
            <div class="weather-box">
                <p class="name">湿度</p>
                <p class="content" style="background:HUMBACK">HUMVALUE%</p>
            </div>
            <div class="weather-box">
                <p class="name">风力风向</p>
                <div class="fl" style="padding-left:8px;">
                    <img class="fl" style="transform:rotate(WIND_DIRECTIONdeg);
                -ms-transform:rotate(WIND_DIRECTIONdeg);
                -moz-transform:rotate(WIND_DIRECTIONdeg);
                -webkit-transform:rotate(WIND_DIRECTIONdeg);
                -o-transform:rotate(WIND_DIRECTIONdeg); " src="/img/wind_icon.png">
                    <span class="fl wind-value">WINDVALUEm/s</span>
                </div>
            </div>
        </div>
    </script>
    <script type="text/html" id="dateModel">
        <div class="time-day fl" style="width:WIDTHpx">
            <p class="DAY_ID" style="line-height:45px;">TIME</p>
        </div>
    </script>

    <script type="text/html" id="aqiDay">
        （日AQI:AQI_NUM <span class="aqi-level" style="color:AQI_COLOR">AQI_LEVEL</span> MAIN_POL) AQI_MATH
    </script>

    <script type="text/html" id="weatherTextContentModel">
        <li class="fl content-text-model" style="background:BACKGROUND">CONTENT</li>
    </script>

    <script type="text/html" id="hourModel">
        <li class="fl  time-text-model" class="">TIME</li>
    </script>

    <!-- 移动端点位基础信息模板 -->
    <script type="text/html" id="phoneBasisContentModel">
        <div class="fl name-box">
            <ul>
                <li>
                    <p class="name ">时间</p>
                </li>
                <li>
                    <p class="name ">AQI</p>
                </li>
                <li style="height:6rem;">
                    <p class="name" style="writing-mode: vertical-rl;margin:auto;padding-top: 0.8rem;">
                        <p class="name_text">风速</p>
                        <p class="name_text">风向</p>
                    </p>
                </li>
                <li>
                    <p class="name">温度 </p>
                </li>
                <li style="margin-top:5px">
                    <p class="name">湿度</p>
                </li>
            </ul>
        </div>
        <div class="fl content-box">
            <ul class="time-hour-box"></ul>
            <ul class="aqi-box"></ul>
            <div style="height:6rem;width:4800px" class="windChartBox"></div>
            <ul class="temp-box"></ul>
            <ul class="hum-box"></ul>
        </div>
    </script>

    <!-- 移动端点位气象详情模板 -->
    <script type="text/html" id="phoneWeatherForecastModel">
        <div class="fl name-box">
            <ul>
                <li>
                    <p class="name">时间</p>
                </li>
                <li>
                    <p class="name">风力</p>
                </li>
                <li>
                    <p class="name">温度 </p>
                </li>
                <li>
                    <p class="name">湿度</p>
                </li>
                <li>
                    <p class="name">压强</p>
                </li>
                <li>
                    <p class="name">降雨量</p>
                </li>
                <li>
                    <p class="name">辐射</p>
                </li>
            </ul>
        </div>
        <div class="fl content-box">
            <ul class="time-hour-box"></ul>
            <ul class="wind-speed-box"></ul>
            <ul class="temp-box"></ul>
            <ul class="hum-box"></ul>
            <ul class="pressureBox"></ul>
            <ul class="rainfallBox"></ul>
            <ul class="swdBox"></ul>
        </div>
    </script>



    <!-- 移动端点位空气监测模板 -->
    <script type="text/html" id="phoneAirQualityModel">
        <div class="fl name-box">
            <ul>
                <li>
                    <p class="name">时间</p>
                </li>
                <li>
                    <p class="name">CO </p>
                </li>
                <li>
                    <p class="name">SO2</p>
                </li>
                <li>
                    <p class="name">NO2</p>
                </li>
                <li>
                    <p class="name">PM2.5</p>
                </li>
                <li>
                    <p class="name">PM10</p>
                </li>
                <li>
                    <p class="name">O3</p>
                </li>
            </ul>
        </div>
        <div class="fl content-box">
            <ul class="time-hour-box"></ul>
            <ul class="co-box"></ul>
            <ul class="so2-box"></ul>
            <ul class="no2-box"></ul>
            <ul class="pm25-box"></ul>
            <ul class="pm10-box"></ul>
            <ul class="o3-box"></ul>
        </div>
    </script>


    <!-- 点位空气监测模板 -->
    <script type="text/html" id="airQualityMonitorModel">
        <div class="fl name-box">
            <ul>
                <li style="height:45px">
                    <p style="width:100px;height:45px!important;float:left;background:#ffffff"></p>
                </li>
                <li>
                    <p class="fr unit">h</p>
                    <p class="name fr">时间</p>
                </li>
                <li>
                    <p class="fr unit"> </p>
                    <p class="name fr">AQI</p>
                </li>
                <li>
                    <p class="fr unit">mg/㎡</p>
                    <p class="name fr">CO </p>
                </li>
                <li>
                    <p class="fr unit">μg/㎡</p>
                    <p class="name fr">SO2</p>
                </li>
                <li>
                    <p class="fr unit">μg/㎡</p>
                    <p class="name fr">NO2</p>
                </li>
                <li>
                    <p class="fr unit">μg/㎡</p>
                    <p class="name fr">PM2.5</p>
                </li>
                <li>
                    <p class="fr unit">μg/㎡</p>
                    <p class="name fr">PM10</p>
                </li>
                <li>
                    <p class="fr unit">μg/㎡</p>
                    <p class="name fr">O3</p>
                </li>
            </ul>
        </div>
        <div class="fl content-box">
            <ul class="monitor-time-day-box" style="height:45px!important;"></ul>
            <ul class="monitor-time-hour-box"></ul>
            <ul class="aqi-box"></ul>
            <ul class="co-box"></ul>
            <ul class="so2-box"></ul>
            <ul class="no2-box"></ul>
            <ul class="pm25-box"></ul>
            <ul class="pm10-box"></ul>
            <ul class="o3-box"></ul>
        </div>
    </script>
    <!-- 点位气象监测模板 -->
    <script type="text/html" id="weatherMonitorModel">
        <div class="fl name-box">
            <ul>
                <li style="height:45px">
                    <p style="width:100px;height:45px!important;float:left;background:#ffffff"></p>
                </li>
                <li>
                    <p class="fr unit">h</p>
                    <p class="name fr">时间</p>
                </li>
                <li class="weather-chart">
                    <p class="fr unit">℃</p>
                    <p class="name fr">温度</p>
                </li>
                <li class="weather-chart">
                    <p class="fr unit">%</p>
                    <p class="name fr">湿度 </p>
                </li>
                <li class="weather-chart">
                    <p class="fr unit">m/s</p>
                    <p class="name fr">风力</p>
                </li>
            </ul>
        </div>
        <div class="fl content-box">
            <div class="current-time-frame"></div>
            <ul class="time-day-box" style="height:45px!important;"></ul>
            <ul class="time-hour-box"></ul>
            <div class="weather-chart tempMonitorChartBox monitor-chart-box"></div>
            <div class="weather-chart humMonitorChartBox monitor-chart-box"></div>
            <div class="weather-chart windMonitorChartBox monitor-chart-box"></div>
        </div>
    </script>


    <!-- 点位基础信息模板 -->
    <script type="text/html" id="basisContentModel">
        <div class="fl name-box">
            <ul>
                <li style="height:45px">
                    <p style="width:100px;height:45px!important;float:left;background:#ffffff"></p>
                </li>
                <li>
                    <p class="fr unit">h</p>
                    <p class="name fr">时间</p>
                </li>
                <li>
                    <p class="fr unit"> </p>
                    <p class="name fr">AQI</p>
                </li>
                <li style="height:115px;">
                    <p class="fr unit">m/s</p>
                    <p class="name fr">风向风速 </p>
                </li>
                <li>
                    <p class="fr unit">℃</p>
                    <p class="name fr">温度 </p>
                </li>
                <li>
                    <p class="fr unit">%</p>
                    <p class="name fr">湿度</p>
                </li>
            </ul>
        </div>
        <div class="fl content-box">
            <div class="current-time-frame"></div>
            <ul class="time-day-box" style="height:45px!important;"></ul>
            <ul class="time-hour-box"></ul>
            <ul class="aqi-box"></ul>
            <div style="height:115px;width:4800px" class="windChartBox"></div>
            <ul class="temp-box"></ul>
            <ul class="hum-box"></ul>
        </div>
    </script>

    <!-- 点位气象详情模板 -->
    <script type="text/html" id="weatherForecastModel">
        <div class="fl name-box">
            <ul>
                <li style="height:45px">
                    <p style="width:100px;height:45px;float:left;background:#ffffff"></p>
                </li>
                <li>
                    <p class="fr unit">h</p>
                    <p class="name fr">时间</p>
                </li>
                <li>
                    <p class="fr unit">m/s</p>
                    <p class="name fr">风力</p>
                </li>
                <li>
                    <p class="fr unit">℃</p>
                    <p class="name fr">温度 </p>
                </li>
                <li>
                    <p class="fr unit">%</p>
                    <p class="name fr">湿度</p>
                </li>
                <li>
                    <p class="fr unit">hpa</p>
                    <p class="name fr">压强</p>
                </li>
                <li>
                    <p class="fr unit">mm</p>
                    <p class="name fr">降雨量</p>
                </li>
                <li>
                    <p class="fr unit">w/㎡</p>
                    <p class="name fr">辐射</p>
                </li>
            </ul>
        </div>
        <div class="fl content-box">
            <div class="current-time-frame"></div>
            <ul class="time-day-box" style="height:45px"></ul>
            <ul class="time-hour-box"></ul>
            <ul class="wind-speed-box"></ul>
            <ul class="temp-box"></ul>
            <ul class="hum-box"></ul>
            <ul class="pressureBox"></ul>
            <ul class="rainfallBox"></ul>
            <ul class="swdBox"></ul>
        </div>
    </script>
    <!-- 点位污染详情模板 -->
    <script type="text/html" id="airQualityModel">
        <div class="fl name-box">
            <ul>
                <li style="height:45px">
                    <p style="width:100px;height:45px!important;float:left;background:#ffffff"></p>
                </li>
                <li>
                    <p class="fr unit">h</p>
                    <p class="name fr">时间</p>
                </li>
                <li>
                    <p class="fr unit"> </p>
                    <p class="name fr">AQI</p>
                </li>
                <li>
                    <p class="fr unit">mg/㎡</p>
                    <p class="name fr">CO </p>
                </li>
                <li>
                    <p class="fr unit">μg/㎡</p>
                    <p class="name fr">SO2</p>
                </li>
                <li>
                    <p class="fr unit">μg/㎡</p>
                    <p class="name fr">NO2</p>
                </li>
                <li>
                    <p class="fr unit">μg/㎡</p>
                    <p class="name fr">PM2.5</p>
                </li>
                <li>
                    <p class="fr unit">μg/㎡</p>
                    <p class="name fr">PM10</p>
                </li>
                <li>
                    <p class="fr unit">μg/㎡</p>
                    <p class="name fr">O3</p>
                </li>
            </ul>
        </div>
        <div class="fl content-box">
            <div class="current-time-frame"></div>
            <ul class="time-day-box" style="height:45px!important;"></ul>
            <ul class="time-hour-box"></ul>
            <ul class="aqi-box"></ul>
            <ul class="co-box"></ul>
            <ul class="so2-box"></ul>
            <ul class="no2-box"></ul>
            <ul class="pm25-box"></ul>
            <ul class="pm10-box"></ul>
            <ul class="o3-box"></ul>
        </div>
    </script>

    <div id="tara-stats" class="invisible"></div>

    <div id="notice" class="invisible">
        <p><span id="notice-hide" class="text-button invisible">✕</span><a href="about.html#geos-disclaimer"
                class="internal-link">important disclaimer</a>
        </p>
    </div>
    <div id="details">
        <p id="status"></p>
        <div id="menu" class="invisible">
            <button hidden id="search-city" type="submit"></button>
            <p>日期 |
                <span id="data-date" class="local"></span>
                <span id="toggle-zone" class="text-button"></span>
            </p>
            <p>数据 | <span id="data-layer"></span></p>
            <p><span id="scale-label">范围 | </span></p>
            <p>来源 | <span id="data-center"></span></p>
            <p>管理 |
                <!--<span class="text-button" id="nav-now" title="当前状况">现在</span>-->
                <span id="nav-now"></span>
                <span class="noselect">
                    <span class="text-button" id="nav-backward-more"> « </span> –
                    <span class="text-button" id="nav-backward"> ‹ </span> –
                    <span class="text-button" id="nav-forward"> › </span> –
                    <span class="text-button" id="nav-forward-more"> » </span>
                </span>
                <span class="text-button" id="option-show-grid" title="网格视图">网格</span>
                <span class="text-button" id="animate-start" title="启用/停用动画">▷</span>

            </p>

        </div>
        

    </div>
    <div id="loading"> <img src="./images/loading.gif"> </div>
    <div id="sharingBox"></div>

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=UwrDLDbFuAtRiZXGzkgx4c3m&s=1"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=b2459d466c9b87cea5fa247a9be9bc81"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.js"></script>
    <script src="./dist/bundle.min.js"></script>
    <script>
        initPage_map()     
        showMap()
    </script> 
</body>
</html>


